<template>
  <div class="test-dialog">
    <h3>弹窗测试</h3>
    <div class="button-group">
      <button class="test-button info" @click="showInfoDialog">显示提示弹窗</button>
      <button class="test-button success" @click="showSuccessDialog">显示成功弹窗</button>
      <button class="test-button error" @click="showErrorDialog">显示错误弹窗</button>
    </div>
  </div>
</template>

<script>
// 直接从Vue原型上获取弹窗工具
export default {
  name: 'TestDialog',
  methods: {
    showInfoDialog() {
      this.$messageDialog.info('这是一条提示信息');
    },
    showSuccessDialog() {
      this.$messageDialog.success('操作成功完成！');
    },
    showErrorDialog() {
      this.$messageDialog.error('操作过程中发生错误');
    }
  }
}
</script>

<style scoped>
.test-dialog {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin: 20px 0;
}

.button-group {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.test-button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
}

.test-button.info {
  background-color: #1890ff;
}

.test-button.success {
  background-color: #52c41a;
}

.test-button.error {
  background-color: #f5222d;
}
</style> 